<template>
  <div class="income">
    <div class="header">
      <a-breadcrumb>
        <a-breadcrumb-item><a @click="navBack">首页</a></a-breadcrumb-item>
        <a-breadcrumb-item>我的资源</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div>
      <div v-for="(item, index) of incomeList" :key="index">
        <h6 class="bg-body-tertiary p-2 border-top border-bottom">{{ item.auther }}</h6>
        <div class="row">
          <div class="col-xl-6 mb-4 " v-for="(childrenItem, childrenIndex) of item.worksList" :key="childrenIndex">
            <div class="card card_box">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                  <div class="d-flex align-items-center">
                    <img :src="childrenItem.img" alt="" style="width: 45px; height: 45px" class="rounded-circle" />
                    <div class="ms-3">
                      <p class="fw-bold mb-1">{{ childrenItem.title }} {{ childrenIndex }}</p>
                      <p class="text-muted mb-0 card_text">{{ childrenItem.text }}</p>
                    </div>
                  </div>
                  <span class="badge rounded-pill badge-success">Active</span>
                </div>
              </div>
              <div class="card-footer border-0 bg-body-tertiary p-2 d-flex justify-content-around">
                <a-button type="primary" role="button" @click="editText">编辑</a-button>
                <a-button type="primary" role="button" danger @click="remove">下架</a-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { message } from 'ant-design-vue';
import { useRouter } from "vue-router";

const router = useRouter();
const incomeList = reactive([
  {
    auther: "艺人名称",
    userId: 12,
    worksList: [
      {
        id: 1,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "内容过长这样显示内容过长这样显示内容过长这样显示内容过长这样显示内容过长这样显示",
      },
      {
        id: 2,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 3,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 4,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 5,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 6,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
    ],
  },
  {
    auther: "艺人名称123",
    userId: 112,
    worksList: [
      {
        id: 1,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 2,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 3,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 4,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 5,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 6,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
    ],
  },
  {
    auther: "艺人名称123",
    userId: 1112,
    worksList: [
      {
        id: 1,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 2,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
      {
        id: 3,
        img: "https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_640.jpg",
        title: "专辑1",
        text: "这是内容内容内容内容内容内容内容内容内容",
      },
    ],
  },
]);

const navBack = () => {
  router.push({ path: '/' })
}
const editText = () => {
  router.push({ path: '/publishingresources' })
} 

const remove = () => {
  const key = '加载中…………';

  message.loading({ content: 'Loading...', key });
  setTimeout(() => {
    message.success({ content: '删除成功', key, duration: 2 });
  }, 1000);

}
</script>

<style lang="scss" scoped>
.income {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 30px;

  .header {
    margin: 30px 0;
  }

  .card_box {
    cursor: pointer;
    transition: all .2s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 2px 2px 2px #eee;
      border: 1px solid #1677ff;
    }

    .card_text {

      width: auto;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
}
</style>